<template>
	<view :class="origin != 2 ? 'addressItem' : 'addressItem2'">
		<view class="top" v-if="item.name">{{item.name.charAt(0)}}</view>
		<view class="info" v-if="item.name">
			<view style="display: flex;">
				<text class="name">{{item.name}}</text>
				<text class="phone">{{item.phone}}</text>
			</view>
			<text class="address">{{item.address}}</text>
		</view>
		<view class="right">
			<button v-if="origin == 2" :class="item.name ? 'editBtn' : 'addBtn'" @click="navToAddress">编辑</button>
			<view class="tag">
				<uni-tag v-if="item.isDefault == 1 && origin != 2" text="默认" type="success"></uni-tag>
			</view>
			<image v-if="origin != 2" class="editBtn" @click="edit(item.id)"
				src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/2023-02-20/68d8e153-14df-4fcc-8855-73db77a30f00_%E7%82%B9%E5%87%BB.png">
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['item','origin','selectedId'],
		methods:{
			edit(id) {
				uni.navigateTo({
					url: '/pages/addressForm/addressForm?id=' + id
				})
			},
			navToAddress(){
				uni.navigateTo({
					url:'/pages/address/address?type=2&id='+this.item.id
				})
			}
		}
	}
</script>


<style scoped lang="scss">
	
	.addressItem {
		margin: 20rpx 20rpx 5rpx 40rpx;
		padding: 20rpx 0 30rpx 0;
		display: flex;

		.top {
			background-color: #FFB300;
			border-radius: 60px;
			margin: 20rpx 20rpx 50rpx 0;
			height: 80rpx;
			width: 90rpx;
			text-align: center;
			line-height: 80rpx;
			color: white;
		}

		.info {
			width: 550rpx;
		}

		text {
			height: 50rpx;
			line-height: 50rpx;
		}

		.name {
			display: block;
			margin: 0 10rpx 0 10rpx;
			font-size: 40rpx;
			font-weight: 500;
		}

		.phone {
			color: #B5B5B5;
			font-size: 32rpx;
		}

		.address {
			display: block;
			margin: 10rpx 0 10rpx 0;
			font-weight: 350;
			font-size: 35rpx;
			word-break: break-all;
		}

		.right {
			width: 150rpx;
			font-size: 20rpx;

			.tag {
				height: 40rpx;
			}

			.editBtn {
				width: 50rpx;
				height: 50rpx;
				margin: 30rpx 0 20rpx 30rpx;
				display: block;
			}
		}
	}
	
	
	.addressItem2{
		padding: 20rpx 10rpx 30rpx 10rpx;
		display: flex;
		width: 690rpx;
		
		.top {
			background-color: #FFB300;
			border-radius: 60px;
			margin: 20rpx 20rpx 50rpx 0;
			height: 80rpx;
			width: 90rpx;
			text-align: center;
			line-height: 80rpx;
			color: white;
		}
		
		.info {
			width: 550rpx;
		}
		
		text {
			height: 50rpx;
			line-height: 50rpx;
		}
		
		.name {
			display: block;
			margin: 0 10rpx 0 10rpx;
			font-size: 45rpx;
			font-weight: 500;
		}
		
		.phone {
			color: #B5B5B5;
			font-size: 35rpx;
		}
		
		.address {
			display: block;
			margin: 10rpx 0 10rpx 0;
			font-weight: 350;
			font-size: 35rpx;
			word-break: break-all;
		}
		
		.right {
			width: 150rpx;
			font-size: 20rpx;
		
			.editBtn {
				text-align: center;
				font-size:30rpx;
				margin:30rpx 0 0 20rpx;
				width: 100rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: white;
				background-color: #FFB300;
				padding: 5rpx;
				border-radius: 10rpx;
			}
			
			.addBtn{
				background-color: #FFB300;
				color: white;
				width:400rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 40rpx;
				margin: 0 125rpx 0 125rpx;
			}
		}
	}
	
</style>
